import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:sptapp/widget/common_widget.dart';

import '../../config/const.dart';

class MinDeviceNetInfoPage extends StatefulWidget {
  const MinDeviceNetInfoPage({super.key});

  @override
  State<MinDeviceNetInfoPage> createState() => _MinDeviceNetInfoPageState();
}

class _MinDeviceNetInfoPageState extends State<MinDeviceNetInfoPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: defaultBlackBgColor,
      appBar: myAppBar(context, 'Operation Instructions'.tr),
      body: Container(
        padding: EdgeInsets.symmetric(horizontal: 40.w),
        child: SingleChildScrollView(
          child: Column(
            children: [
              Container(
                padding: EdgeInsets.symmetric(vertical: 40.w),
                child: Text('When initially performing the device network configuration, you need to connect to the device\'s WI-FI in the system settings of your phone.',style: TextStyle(
                  color: Color.fromRGBO(255, 255, 255, 1),
                  fontSize: 24.sp,
                  fontWeight: FontWeight.w600
                ),),
              ),
              Container(
                width: 350.w,
                child: Stack(
                  children: [
                    Image.asset('assets/common/device_net_info_1.png',width: 250.w,),
                    Positioned(child: Image.asset('assets/common/device_info_sz.png',width: 216.w,),right: 0,top: 272.w,),
                  ],
                ),
              ),

              Container(
                padding: EdgeInsets.symmetric(vertical: 40.w),
                child: Text('Jump from the pop-up window to the settings of your mobile phone system and enter the Wi-Fi of your device to connect.',style: TextStyle(
                    color: Color.fromRGBO(255, 255, 255, 1),
                    fontSize: 24.sp,
                    fontWeight: FontWeight.w600
                ),),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset('assets/common/device_net_info_2.png',width: 250.w,),
                  Image.asset('assets/common/device_net_info_left.png',width: 112.w,),
                  Image.asset('assets/common/device_net_info_step2.png',width: 290.w,),
                ],
              ),

              Container(
                padding: EdgeInsets.symmetric(vertical: 40.w),
                child: Text('Check on the device to see if the connection is successful. After the connection is established, return to the App and enter the account and password of your home Wi-Fi.',style: TextStyle(
                    color: Color.fromRGBO(255, 255, 255, 1),
                    fontSize: 24.sp,
                    fontWeight: FontWeight.w600
                ),),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Image.asset('assets/common/device_net_info_3.png',width: 250.w,),
                  Image.asset('assets/common/device_net_info_right.png',width: 112.w,),
                  Image.asset('assets/common/device_net_info_4.png',width: 250.w,),
                ],
              ),

              Container(
                padding: EdgeInsets.symmetric(vertical: 40.w),
                child: Text('On this page, please enter the account and password of your home Wi-Fi. If you accidentally closed the pop-up window in the first step, you can also click the "Go to WI-FI setting" button on this page to jump to the system Wi-Fi of your mobile phone to connect to the Wi-Fi of your device.',style: TextStyle(
                    color: Color.fromRGBO(255, 255, 255, 1),
                    fontSize: 24.sp,
                    fontWeight: FontWeight.w600
                ),),
              ),
              Container(
                width: 350.w,
                child: Stack(
                  children: [
                    Image.asset('assets/common/device_net_info_5.png',width: 250.w,),
                    Positioned(child: Image.asset('assets/common/device_info_sz.png',width: 216.w,),right: 0,top: 294.w,),
                  ],
                ),
              ),

              Container(
                padding: EdgeInsets.symmetric(vertical: 40.w),
                child: Text('After the connection is successful, return to the settings of your mobile phone system and switch back to your home Wi-Fi. Then you can use it normally.',style: TextStyle(
                    color: Color.fromRGBO(255, 255, 255, 1),
                    fontSize: 24.sp,
                    fontWeight: FontWeight.w600
                ),),
              ),
              GestureDetector(
                onTap: (){
                  Navigator.of(context).pop();
                },
                child: Container(
                  height: 108.w,
                  alignment: Alignment.center,
                  decoration: BoxDecoration(
                    color: themeColor,
                    borderRadius: BorderRadius.circular(8.w)
                  ),
                  child: Text('Next'.tr,style: TextStyle(
                    color: Colors.white,
                    fontSize: 32.sp,
                    fontWeight: FontWeight.w600
                  ),),
                ),
              ),
              SizedBox(height: ScreenUtil().bottomBarHeight+20,)
            ],
          ),
        ),
      ),
    );
  }
}
